<template>
  <div class="feta-heart pd-20">
    <el-row>
      <el-col :span="10">
        <el-radio-group v-model="id"
                        @change="changeRadio">
          <el-radio-button v-for="item in titleList"
                           :label="item.id"
                           :key="item.id"
                           :value="item.id">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="10">
        <el-button type="primary"
                   @click="getList(id)">查 询</el-button>
        <el-button type="primary"
                   @click="handleOp('add', null)">新 增</el-button>
      </el-col>
    </el-row>
    <el-card class="mt-20 card-list">
      <template v-if="!isShow">
        <el-tag :key="item.id"
                :value="item.id"
                type="success"
                size="small "
                v-for="item in tagsList"
                closable
                :disable-transitions="false"
                @close="delTags(item.id)">
          <span>{{item.serialNumber}}</span>
        </el-tag>
      </template>
      <div v-if="isShow"
           align="center"
           class="no-data">
        <img src="./../../../assets/images/address-empty.png"
             alt="暂无数据">
        <p align="center"
           class="no-data-text">暂无数据</p>
      </div>
      <p align="center"
         :style="{marginTop : !isShow ? '187px': '0'}">
        <el-button type="primary"
                   @click="$router.push({ name: 'cooperationHospital' })">返 回</el-button>
      </p>
    </el-card>
    <el-dialog :title="title"
               :visible.sync="dialogVisible"
               width="30%"
               @close="dialogVisible = false">
      <el-form :rules="rules"
               :model="ruleForm"
               ref="ruleRef">
        <el-form-item label="SN码"
                      prop="sn">
          <el-input placeholder="请输入SN码"
                    v-model="ruleForm.sn"
                    class="w-200"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'fetaHeart', // 胎心
  data () {
    return {
      hospitalId: Number(this.$route.query.hospitalId),
      id: '',
      title: '新 增',
      titleList: [],
      tagsList: [],
      dialogVisible: false,
      ruleForm: {
        sn: ''
      },
      rules: {
        sn: [
          { required: true, message: '请输入SN码', trigger: 'blur' },
        ]
      },
      isShow: false
    }
  },
  methods: {
    // 获取标题
    async getTitle () {
      const { data: res } = await this.post(this.api.fetaHeart.selectGoodsList, {
        serviceType: 3
      })
      if (res.code === '200') {
        this.titleList = res.object
        this.id = res.object[0].id
        this.getList(this.id)
      }

    },
    async getList (id) {
      this.id = id
      const { data: res } = await this.post(this.api.fetaHeart.selectSNList, {
        hospitalId: this.hospitalId,
        goodsTypeId: id
      })
      if (res.code === '200') {
        this.tagsList = res.object
        if (res.object.length > 0) {
          this.isShow = false
        } else {
          this.isShow = true
        }
      } else {
        this.$message.error(res.message)
      }
    },
    // 选择标题
    changeRadio (val) {
      this.id = val
      this.getList(this.id)
      if (this.$refs.ruleRef) {
        this.$refs.ruleRef.resetFields()
      }
    },
    // 删除tag标签
    delTags (id) {
      this.$confirm('确认删除？')
        .then(async _ => {
          const { data: res } = await this.post(this.api.fetaHeart.deleteSN, {
            id: id
          })
          if (res.code === '200') {
            this.$message.success('删除成功!')
            this.tagsList.splice(this.tagsList.indexOf(id), 1);
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(_ => { });
    },
    // 添加标签、编辑
    handleOp (op, row) {
      this.dialogVisible = true
      switch (op) {
        case 'add':
          this.title = '新 增'
          if (this.$refs.ruleRef) {
            this.$refs.ruleRef.resetFields()
          }
          break;
        case 'edit':
          this.title = '编 辑'
          break;
      }
    },
    // 提交
    submit () {
      this.$refs.ruleRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.post(this.api.fetaHeart.addSN, {
            goodsTypeId: this.id,
            hospitalId: this.hospitalId,
            ...this.ruleForm
          })
          if (res.code === '200') {
            this.$message.success('新增成功!')
            this.getList()
            this.dialogVisible = false
          } else {
            this.$message.error(res.message)
          }
        }

      })
    },
  },
  created () {
    this.getTitle()
  }
}
</script>
<style scoped lang="scss">
.card-list {
  min-height: 300px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.no-data {
  position: relative;
  .no-data-text {
    position: relative;
    margin-top: -60px;
    padding-bottom: 50px;
    font-size: 16px;
  }
}
</style>
